<template>
  <div class="oe-approval-paper" v-loading="loading">
    <a-tooltip>
      <template slot="title">回到顶部</template>
      <a-back-top />
    </a-tooltip>
    <info-top :showExpend="false"></info-top>
    <div class="oe-ap-paper-container">
      <top-tip :batchTitle="batchTitle" :examTitle="examTitle" :showBack="true"></top-tip>
      
      <div class="oe-ap-paper-content" v-if="newPaperList.length">
        <div class="oe-ap-left">
          <answer-card
            :questionList="questionList"
            type="result"
            :resUltType="type"
            :stuIdlis="stuIdlis"
            :workExamStuId="workExamStuId"
            :stuid="stuid"
            :batchid="batchid"
            :examid="examid"
            :examScore="examScore"
            :wordBtn="true"
            :totalScore="totalScore"
          ></answer-card>
        </div>
        <div class="fr oe-stu-list">
          <span class="stu-list-title"
            >学生列表<label style="color:#0177D5;">({{ stuList.length }})</label></span
          >
          <div style="padding: 5px 5px 5px 5px">
            <a-input-search placeholder="请输入学生姓名" v-model="query" allow-clear @search="getPaperStuList" />
          </div>
          <div class="stu-list-box">
            <div
              class="stu-lis"
              v-for="(item, index) in stuList"
              :key="index"
              :class="{ 'stu-lis-activate': item.UserId == stuIdlis }"
              @click="getStuId(item)"
            >
              <a-tooltip
                style="marginTop: 10px"
                placement="left"
                :title="item.DisplayName"
              >
                <img :src="item.AvatorUrl" alt="" />
                <div class="stu-lis-content">
                  <div>{{ item.DisplayName }}<small style="color:red" v-if="item.UpdateState==0">(同步中...)</small></div>
                  <p>{{ item.UserName }}</p>
                  <p v-if="type == 2" style="color: #f00;">得分：{{ item.GetScore }}分</p>
                </div>
              </a-tooltip>
            </div>
            <div v-if="stuList.length == 0" style="text-align: center;color:#ccc;">暂无学生</div>
          </div>
        </div>
        <div :class="['oe-ap-center', pdfShow ? '' : '']" id="pdfDom" ref="exportPdf" style="float: right;" v-if="paperShow">
          <div v-if="pdfTitleShow" style="font-size: 24px;text-align: center;line-height: 60px;">{{ htmlTitle }}</div>
          <teaTestPaper :questionData="newPaperList" :showAnswer="true" :numInputStatus="'examine'"></teaTestPaper>
        </div>
        
      </div>
      <div class="paper-no-data" v-if="!newPaperList.length">
        <blank-tips></blank-tips>
      </div>
    </div>
    <a-modal
      title="温馨提示："
      class="oe-student"
      :visible="saveExamAnswer"
      width="435px"
      :closable="false"
    >
      <div class="oe-select">
        <span class="oe-manage-select">
          <h3>{{displayName}} 考生的作答记录正在同步中，请稍后查看...</h3>
        </span>
      </div>
      <template slot="footer">
        <a-button @click.stop="saveExamAnswer = false">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import answerCard from '@/components/answer-card/index.vue';
import blankTips from '@/components/blank-tips/index.vue';
import teaTestPaper from '@/components/teaTestPaper/index.vue';
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'studentExam',
  mixins: [GetOperationList],
  components: {
    infoTop,
    topTip,
    answerCard,
    blankTips,
    teaTestPaper
  },
  data() {
    return {
      saveExamAnswer: false,
      title: '',
      // 左边控制
      questionList: [],
      paperList: [],
      newPaperList:[],
      loading: false,
      isShowScore: true,
      totalScore: '',
      stuList: [],
      displayName: '',
      query: '',
      stuIdlis: '',
      DisplayName: '',
      pdfShow: false,
      TimeInterval: '',
      timeNum: 0,
      htmlTitle: '',
      examScore: 0,
      pdfTitleShow: false,
      paperShow: true,
      examTitle:'',
      batchTitle:'',
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.$nextTick(() => {
        vm.getReviewPaper();
      });
    });
  },
  props: {
    batchid: {
      type: String,
      default: ''
    },
    examid: {
      type: String,
      default: ''
    },
    stuid: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 0
    },
  },
  mounted() {
    this.stuIdlis = this.stuid;
    this.getPaperStuList();
    this.getOperation();
  },
  methods: {
    getOperation() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    //获取学生列表
    getPaperStuList() {
      this.$http
        .post('/api/design/Marking/getPaperStuList', {
          examId: this.examid,
          state: this.type,
          query: this.query
        })
        .then((res) => {
          if (res.code > 0) {
            this.stuList = res.stuList;
            for (let i = 0; i < this.stuList.length; i++) {
              if (this.stuList[i].UserId == this.stuIdlis) {
                this.DisplayName = this.stuList[i].DisplayName;
              }
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    getStuId(data) {
      if (this.stuIdlis != data.UserId) {
        this.stuIdlis = data.UserId;
        this.DisplayName = data.DisplayName;
        this.htmlTitle = this.title + this.DisplayName;
        this.getReviewPaper();
      }
    },
    // 获取批阅娟
    getReviewPaper(type) {
      this.loading = true;
      this.$http
        .post('/api/design/marking/previewStuPaper', {
          examId: this.examid,
          stuId: this.stuIdlis
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.title = rst.title;
            this.totalScore = this.type == 2 ? rst.getScore + '分' : '未批阅';
            this.examScore = rst.examScore - rst.getScore;
            this.paperList = [];
            this.newPaperList = rst.list
            this.workExamStuId = rst.workExamStuId;
            if(rst.updateState == 0){
              this.displayName = rst.displayName;
              this.saveExamAnswer = true;
            }
            if (rst.list.length) {
              this.initPaper(rst.list);
              // this.initQuCard(rst.list);
            }
            if (type == 'save') {
              setTimeout(() => {
                this.savePdf('save');
              }, 1000);
            }
            this.htmlTitle = this.title + this.DisplayName;
          } else {
            this.$message.error(rst.msg);
            this.$router.back();
          }
        });
    },
    // 初试话题目列表
    initPaper(list) {
      this.paperShow = false;
      this.paperList = [];
      // 1单项选择   2多项选择 3判断题 4填空题(主观)  /5填空题(客观) / 6问答题  /7匹配题  /8阅读理解  /9完形填空 / 10文件上传 / 11视听题 /
      this.initQuCard(list);
      
      this.$forceUpdate();
      setTimeout(() => {
        this.paperShow = true;
      }, 200);
    },
    // 初始化左边卡片
    initQuCard(list) {
      this.questionList = list;
    },
    // 获取题目类型
    getType(type) {
      let questionType = [
        '单选题',
        '多选题',
        '判断题',
        '填空题',
        '填空题',
        '问答题',
        '匹配题',
        '阅读理解',
        '完形填空',
        '文件上传',
        '视听题'
      ];
      return questionType[Number(type) - 1];
    },
    savePdfBatch() {
      if (this.timeNum < this.stuList.length) {
        this.stuIdlis = this.stuList[this.timeNum].UserId;
        this.DisplayName = this.stuList[this.timeNum].DisplayName;
        this.getReviewPaper('save');
      } else {
        console.log('结束')
        // this.printPdfs();
        // clearInterval(this.TimeInterval);
        // this.timeNum = 0;
      }
    },
    printPdfBatch() {
      console.log('批量');
    },
    savePdf(type) {
      this.pdfShow = true;
      window.scrollTo(0, 0);
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0;
      if (type == 'save') {
        this.printPdf();
        setTimeout(() => {
          this.getPdf(this.htmlTitle,undefined,true);
          this.pdfShow = false;
          this.timeNum++;
          this.printPdfs();
          this.savePdfBatch();
        }, 500);
      } else {
        this.printPdf();
        setTimeout(() => {
          this.getPdf(this.htmlTitle,undefined,true);
          this.pdfShow = false;
          this.printPdfs();
        }, 500);
      }
    },

    // 隐藏输入框
    printPdf() {
        window.scrollTo(0, 0);
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0;
        let pdfDom = document.getElementById('pdfDom');
        let scoreSpanDom = pdfDom.getElementsByClassName('Ti-pdf-input');
        for (let key = 0; key < scoreSpanDom.length; key++) {
          scoreSpanDom[key].style.display = 'inline-block';
        }
        let inputDom = pdfDom.getElementsByClassName('ant-input');
        for (let i = 0; i < inputDom.length; i++) {
          inputDom[i].style.display = 'none';
        }
        let spanDom = pdfDom.getElementsByClassName('Ti-li-input');
        for (let key = 0; key < spanDom.length; key++) {
          spanDom[key].style.display = 'inline-block';
        }
    },
    printPdfs() {
        window.scrollTo(0, 0);
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0;
        let pdfDom = document.getElementById('pdfDom');
        let scoreSpanDom = pdfDom.getElementsByClassName('Ti-pdf-input');
        for (let key = 0; key < scoreSpanDom.length; key++) {
          scoreSpanDom[key].style.display = 'none';
        }
        let inputDom = pdfDom.getElementsByClassName('ant-input');
        for (let i = 0; i < inputDom.length; i++) {
          inputDom[i].style.display = 'inline-block';
        }
        let spanDom = pdfDom.getElementsByClassName('Ti-li-input');
        for (let key = 0; key < spanDom.length; key++) {
          spanDom[key].style.display = 'none';
        }
    }
  }
};
</script>
<style scoped>
@page {
  margin-bottom: 0mm;
  margin-top: 0mm;
}
</style>
